1
|
|
|
var filename_status = '/api/current', |
2
|
|
|
filename_summary = '/api/summary', |
3
|
|
|
WIDTH = 300, |
4
|
|
|
HEIGHT = 200, |
5
|
|
|
MARGINS = {top: 10, left: 30, right: 20, bottom: 20}, |
6
|
|
|
sugarloaf = {}; |
7
|
|
|
|
8
|
|
|
sugarloaf.difficulty_order = { |
9
|
|
|
'beginner': 1, |
10
|
|
|
'intermediate': 2, |
11
|
|
|
'black': 3, |
12
|
|
|
'double-black': 4, |
13
|
|
|
'terrain-park': 5 |
14
|
|
|
} |
15
|
|
|
sugarloaf.parseDate = d3.time.format('%Y-%m-%dT%H:%M:%S'); |
|
|
|
|
16
|
|
|
|
17
|
|
|
function buildCharts() { |
18
|
|
|
sugarloaf.ndx = crossfilter(sugarloaf.data.trails); |
19
|
|
|
|
20
|
|
|
sugarloaf.openDim = sugarloaf.ndx.dimension(function(d) { |
21
|
|
|
if (d.open) { |
22
|
|
|
return 'Open'; |
23
|
|
|
} else { |
24
|
|
|
return 'Closed'; |
25
|
|
|
}; |
26
|
|
|
}); |
27
|
|
|
sugarloaf.openGroup = sugarloaf.openDim.group().reduceCount(function(d) { |
28
|
|
|
return d.open; |
29
|
|
|
}); |
30
|
|
|
sugarloaf.openChart = dc.rowChart('#chart-row-open'); |
|
|
|
|
31
|
|
|
sugarloaf.openChart |
32
|
|
|
.width(WIDTH) |
33
|
|
|
.height(HEIGHT/2) |
34
|
|
|
.margins(MARGINS) |
35
|
|
|
.dimension(sugarloaf.openDim) |
36
|
|
|
.group(sugarloaf.openGroup) |
37
|
|
|
.elasticX(true); |
38
|
|
|
|
39
|
|
|
|
40
|
|
|
sugarloaf.groomedDim = sugarloaf.ndx.dimension(function(d) { |
41
|
|
|
if (d.groomed) { |
42
|
|
|
return 'Groomed'; |
43
|
|
|
} else { |
44
|
|
|
return 'Ungroomed'; |
45
|
|
|
} |
46
|
|
|
}); |
47
|
|
|
sugarloaf.groomedGroup = sugarloaf.groomedDim.group().reduceCount(function(d) { |
48
|
|
|
return d.groomed; |
49
|
|
|
}) |
50
|
|
|
sugarloaf.groomedChart = dc.rowChart('#chart-row-groomed'); |
|
|
|
|
51
|
|
|
sugarloaf.groomedChart |
52
|
|
|
.width(WIDTH) |
53
|
|
|
.height(HEIGHT/2) |
54
|
|
|
.margins(MARGINS) |
55
|
|
|
.dimension(sugarloaf.groomedDim) |
56
|
|
|
.group(sugarloaf.groomedGroup) |
57
|
|
|
.elasticX(true); |
58
|
|
|
|
59
|
|
|
|
60
|
|
|
sugarloaf.snowmakingDim = sugarloaf.ndx.dimension(function(d) { |
61
|
|
|
if (d.snowmaking) { |
62
|
|
|
return 'Snowmaking in progress'; |
63
|
|
|
} else { |
64
|
|
|
return 'Not snowmaking'; |
65
|
|
|
} |
66
|
|
|
}); |
67
|
|
|
sugarloaf.snowmakingGroup = sugarloaf.snowmakingDim.group().reduceCount(function(d) { |
68
|
|
|
return d.snowmaking; |
69
|
|
|
}); |
70
|
|
|
sugarloaf.snowmakingChart = dc.rowChart('#chart-row-snowmaking'); |
|
|
|
|
71
|
|
|
sugarloaf.snowmakingChart |
72
|
|
|
.width(WIDTH) |
73
|
|
|
.height(HEIGHT/2) |
74
|
|
|
.margins(MARGINS) |
75
|
|
|
.dimension(sugarloaf.snowmakingDim) |
76
|
|
|
.group(sugarloaf.snowmakingGroup) |
77
|
|
|
.elasticX(true); |
78
|
|
|
|
79
|
|
|
sugarloaf.difficultyDim = sugarloaf.ndx.dimension(function(d) { |
80
|
|
|
return d.difficulty; |
81
|
|
|
}); |
82
|
|
|
sugarloaf.difficultyGroup = sugarloaf.difficultyDim.group().reduceCount(function(d) { |
83
|
|
|
return d.difficulty; |
84
|
|
|
}); |
85
|
|
|
sugarloaf.difficultyChart = dc.rowChart('#chart-row-difficulty'); |
|
|
|
|
86
|
|
|
sugarloaf.difficultyChart |
87
|
|
|
.width(WIDTH) |
88
|
|
|
.height(HEIGHT) |
89
|
|
|
.margins(MARGINS) |
90
|
|
|
.dimension(sugarloaf.difficultyDim) |
91
|
|
|
.group(sugarloaf.difficultyGroup) |
92
|
|
|
.ordering(function(d) { |
93
|
|
|
return sugarloaf.difficulty_order[d.key]; |
94
|
|
|
}) |
95
|
|
|
.elasticX(true); |
96
|
|
|
|
97
|
|
|
|
98
|
|
|
sugarloaf.areaDim = sugarloaf.ndx.dimension(function(d) { |
99
|
|
|
return d.area; |
100
|
|
|
}); |
101
|
|
|
sugarloaf.areaGroup = sugarloaf.areaDim.group().reduceCount(function(d) { |
102
|
|
|
return d.area; |
103
|
|
|
}); |
104
|
|
|
sugarloaf.areaChart = dc.rowChart('#chart-row-area'); |
|
|
|
|
105
|
|
|
sugarloaf.areaChart |
106
|
|
|
.width(WIDTH) |
107
|
|
|
.height(HEIGHT * 2) |
108
|
|
|
.margins(MARGINS) |
109
|
|
|
.dimension(sugarloaf.areaDim) |
110
|
|
|
.group(sugarloaf.areaGroup) |
111
|
|
|
.elasticX(true); |
112
|
|
|
|
113
|
|
|
dc.renderAll(); |
114
|
|
|
} |
115
|
|
|
|
116
|
|
|
function summaryToDates(summary) { |
117
|
|
|
var dates = {}; |
118
|
|
|
|
119
|
|
|
summary.conditions.forEach(function(c) { |
120
|
|
|
// set our initial date if unknown |
121
|
|
|
if (undefined === dates[c.datetime]) { |
122
|
|
|
dates[c.datetime] = {}; |
123
|
|
|
} |
124
|
|
|
|
125
|
|
|
// make our difficulties |
126
|
|
|
if (c.open && undefined === dates[c.datetime][c.difficulty]) { |
127
|
|
|
dates[c.datetime][c.difficulty] = c.trail_count; |
128
|
|
|
} else if (c.open) { |
129
|
|
|
dates[c.datetime][c.difficulty] += c.trail_count; |
130
|
|
|
} else if (undefined === dates[c.datetime]['closed']) { |
131
|
|
|
dates[c.datetime]['closed'] = c.trail_count; |
132
|
|
|
} else { |
133
|
|
|
dates[c.datetime]['closed'] += c.trail_count; |
134
|
|
|
}; |
135
|
|
|
}); |
136
|
|
|
|
137
|
|
|
var dates_list = []; |
138
|
|
|
|
139
|
|
|
Object.keys(dates).forEach(function(key) { |
140
|
|
|
var date = dates[key]; |
141
|
|
|
date['datetime'] = sugarloaf.parseDate.parse(key); |
142
|
|
|
dates_list.push(date); |
143
|
|
|
}); |
144
|
|
|
|
145
|
|
|
dates_list.sort(function(a, b) { |
146
|
|
|
if (a.datetime < b.datetime) { |
147
|
|
|
return -1; |
148
|
|
|
} else { |
149
|
|
|
return 1; |
150
|
|
|
} |
151
|
|
|
}); |
152
|
|
|
|
153
|
|
|
return dates_list; |
154
|
|
|
}; |
155
|
|
|
|
156
|
|
|
// takes the output of summaryToDates and returns a list of lists ordered by |
157
|
|
|
// Object.keys(sugarloaf.difficulty_order) |
158
|
|
|
function datesToDataset(dates) { |
159
|
|
|
var output = []; |
160
|
|
|
|
161
|
|
|
Object.keys(sugarloaf.difficulty_order).forEach(function(difficulty) { |
162
|
|
|
var diff_array = []; |
163
|
|
|
|
164
|
|
|
dates.forEach(function(date) { |
165
|
|
|
var date_diff_obj = {'x': date.datetime} |
166
|
|
|
if (undefined === date[difficulty]) { |
167
|
|
|
date_diff_obj['y'] = 0; |
168
|
|
|
} else { |
169
|
|
|
date_diff_obj['y'] = date[difficulty]; |
170
|
|
|
} |
171
|
|
|
diff_array.push(date_diff_obj) |
172
|
|
|
}) |
173
|
|
|
|
174
|
|
|
output.push(diff_array); |
175
|
|
|
}) |
176
|
|
|
return output; |
177
|
|
|
} |
178
|
|
|
|
179
|
|
|
function countDate(date) { |
180
|
|
|
var count = 0; |
181
|
|
|
for (var key in date) { |
182
|
|
|
if (date.hasOwnProperty(key) && key !== 'datetime') { |
183
|
|
|
count += date[key]; |
184
|
|
|
} |
185
|
|
|
} |
186
|
|
|
return count; |
187
|
|
|
} |
188
|
|
|
|
189
|
|
View Code Duplication |
function buildSummaryChart(summary) { |
|
|
|
|
190
|
|
|
sugarloaf.dates = summaryToDates(summary), |
|
|
|
|
191
|
|
|
width = 800 - MARGINS.left - MARGINS.right, |
|
|
|
|
192
|
|
|
height = 200 - MARGINS.top - MARGINS.bottom; |
|
|
|
|
193
|
|
|
sugarloaf.dataset = datesToDataset(sugarloaf.dates); |
194
|
|
|
|
195
|
|
|
sugarloaf.summary_x = d3.time.scale() |
|
|
|
|
196
|
|
|
.range([0, width]) |
197
|
|
|
.domain(d3.extent(sugarloaf.dates.map(function(d) { |
198
|
|
|
return d.datetime; |
199
|
|
|
}))); |
200
|
|
|
|
201
|
|
|
sugarloaf.summary_y = d3.scale.linear() |
|
|
|
|
202
|
|
|
.rangeRound([height, 0]) |
203
|
|
|
.domain([0, d3.max(sugarloaf.dates, function(d) { return countDate(d)})]); |
204
|
|
|
|
205
|
|
|
sugarloaf.summary_stack = d3.layout.stack(); |
|
|
|
|
206
|
|
|
|
207
|
|
|
sugarloaf.summary_stack_layers = sugarloaf.summary_stack(sugarloaf.dataset); |
208
|
|
|
|
209
|
|
|
sugarloaf.summary_area = d3.svg.area() |
210
|
|
|
.interpolate('cardinal') |
211
|
|
|
.x(function(d) { return sugarloaf.summary_x(d.x)}) |
212
|
|
|
.y0(function(d) { return sugarloaf.summary_y(d.y0)}) |
213
|
|
|
.y1(function(d) { return sugarloaf.summary_y(d.y0 + d.y)}); |
214
|
|
|
|
215
|
|
|
sugarloaf.summary_color = d3.scale.ordinal() |
|
|
|
|
216
|
|
|
// green, blue, black, double-black, terrain-park closed |
217
|
|
|
.range(['#00A64B', '#2D2D94', '#6D6D6D', '#000', '#F6AE3B', '#FFF']) |
218
|
|
|
.domain(['green', 'blue', 'black', 'double-black', 'terrain-park', 'closed']); |
219
|
|
|
|
220
|
|
|
sugarloaf.summary_xAxis = d3.svg.axis() |
221
|
|
|
.scale(sugarloaf.summary_x) |
222
|
|
|
.orient('bottom') |
223
|
|
|
//.ticks(d3.time.sundays, 1) |
224
|
|
|
.ticks(10) |
225
|
|
|
//.tickSubdivide(true) |
226
|
|
|
.tickFormat(d3.time.format("%b %e")); |
227
|
|
|
|
228
|
|
|
sugarloaf.summary_yAxis = d3.svg.axis() |
229
|
|
|
.scale(sugarloaf.summary_y) |
230
|
|
|
.orient('left'); |
231
|
|
|
|
232
|
|
|
var svg = d3.select('#chart-summary').append('svg') |
233
|
|
|
.attr('width', width + MARGINS.left + MARGINS.right) |
234
|
|
|
.attr('height', height + MARGINS.top + MARGINS.bottom) |
235
|
|
|
.append('g') |
236
|
|
|
.attr('transform', 'translate(' + MARGINS.left + ',' + MARGINS.top +')'); |
237
|
|
|
|
238
|
|
|
var selection = svg.selectAll('.series') |
|
|
|
|
239
|
|
|
.data(sugarloaf.summary_stack_layers) |
240
|
|
|
.enter().append('path') |
241
|
|
|
.attr('class', 'layer') |
242
|
|
|
.attr('d', function(d) { return sugarloaf.summary_area(d);}) |
243
|
|
|
.style('fill', function(d, i) { return sugarloaf.summary_color(Object.keys(sugarloaf.difficulty_order)[i]) }); |
244
|
|
|
|
245
|
|
|
svg.append('g') |
246
|
|
|
.attr('class', 'x axis') |
247
|
|
|
.attr('transform', 'translate(0,' + height + ')') |
248
|
|
|
.call(sugarloaf.summary_xAxis); |
249
|
|
|
|
250
|
|
|
svg.append('g') |
251
|
|
|
.attr('class', 'y axis') |
252
|
|
|
.call(sugarloaf.summary_yAxis); |
253
|
|
|
} |
254
|
|
|
|
255
|
|
|
d3.json(filename_status, function(data) { |
|
|
|
|
256
|
|
|
sugarloaf.data = data; |
257
|
|
|
|
258
|
|
|
buildCharts(); |
259
|
|
|
}); |
260
|
|
|
|
261
|
|
|
d3.json(filename_summary, function(data) { |
|
|
|
|
262
|
|
|
sugarloaf.summary = data; |
263
|
|
|
|
264
|
|
|
buildSummaryChart(sugarloaf.summary); |
265
|
|
|
}); |
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.